<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Scss语言学习实用心得 | 仲灏小栈</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="专注web全栈学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="code-5CGlqw1B4p">
    <meta name="google-site-verification" content="PbO8RiLRwDnNwqNFNGnaxZnEFB3CqcGMCGoloYfQXV0">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.15972595.css" as="style"><link rel="preload" href="/assets/js/app.6e09c0e4.js" as="script"><link rel="preload" href="/assets/js/2.26fadcea.js" as="script"><link rel="preload" href="/assets/js/16.3acd2d41.js" as="script"><link rel="prefetch" href="/assets/js/10.29078de5.js"><link rel="prefetch" href="/assets/js/100.1775343f.js"><link rel="prefetch" href="/assets/js/101.03c2a233.js"><link rel="prefetch" href="/assets/js/102.2d566277.js"><link rel="prefetch" href="/assets/js/103.28f0aae6.js"><link rel="prefetch" href="/assets/js/104.98d074e6.js"><link rel="prefetch" href="/assets/js/105.a113c54b.js"><link rel="prefetch" href="/assets/js/106.fe975924.js"><link rel="prefetch" href="/assets/js/107.06b48459.js"><link rel="prefetch" href="/assets/js/108.650cfa65.js"><link rel="prefetch" href="/assets/js/109.8dea05a5.js"><link rel="prefetch" href="/assets/js/11.0ffc15c2.js"><link rel="prefetch" href="/assets/js/110.f426e949.js"><link rel="prefetch" href="/assets/js/111.cb0ff462.js"><link rel="prefetch" href="/assets/js/112.2234a7ce.js"><link rel="prefetch" href="/assets/js/113.d42a4afb.js"><link rel="prefetch" href="/assets/js/114.afa6c93d.js"><link rel="prefetch" href="/assets/js/115.e74e58c4.js"><link rel="prefetch" href="/assets/js/116.b52912dc.js"><link rel="prefetch" href="/assets/js/117.f5e176df.js"><link rel="prefetch" href="/assets/js/118.428fdb24.js"><link rel="prefetch" href="/assets/js/119.c7b3c702.js"><link rel="prefetch" href="/assets/js/12.5358dc27.js"><link rel="prefetch" href="/assets/js/120.b28cb8e3.js"><link rel="prefetch" href="/assets/js/121.517216d1.js"><link rel="prefetch" href="/assets/js/122.224b318f.js"><link rel="prefetch" href="/assets/js/123.04e6a56c.js"><link rel="prefetch" href="/assets/js/13.1eb6db46.js"><link rel="prefetch" href="/assets/js/14.2d919975.js"><link rel="prefetch" href="/assets/js/15.351e3a4c.js"><link rel="prefetch" href="/assets/js/17.60b03995.js"><link rel="prefetch" href="/assets/js/18.c6ad362d.js"><link rel="prefetch" href="/assets/js/19.8ab677ff.js"><link rel="prefetch" href="/assets/js/20.99f99fea.js"><link rel="prefetch" href="/assets/js/21.c1d6f733.js"><link rel="prefetch" href="/assets/js/22.6f0b0c91.js"><link rel="prefetch" href="/assets/js/23.13368cdd.js"><link rel="prefetch" href="/assets/js/24.c53a9ca6.js"><link rel="prefetch" href="/assets/js/25.cd4407c5.js"><link rel="prefetch" href="/assets/js/26.d9b2ef17.js"><link rel="prefetch" href="/assets/js/27.16352eff.js"><link rel="prefetch" href="/assets/js/28.a62c7d25.js"><link rel="prefetch" href="/assets/js/29.635009f5.js"><link rel="prefetch" href="/assets/js/3.72d46b47.js"><link rel="prefetch" href="/assets/js/30.db885055.js"><link rel="prefetch" href="/assets/js/31.aa8c6cb9.js"><link rel="prefetch" href="/assets/js/32.e63d710c.js"><link rel="prefetch" href="/assets/js/33.4f69bb69.js"><link rel="prefetch" href="/assets/js/34.9d242b1d.js"><link rel="prefetch" href="/assets/js/35.24c7045d.js"><link rel="prefetch" href="/assets/js/36.2988cd72.js"><link rel="prefetch" href="/assets/js/37.05bf63d5.js"><link rel="prefetch" href="/assets/js/38.ecef1ea2.js"><link rel="prefetch" href="/assets/js/39.0fde8ff2.js"><link rel="prefetch" href="/assets/js/4.d95386e0.js"><link rel="prefetch" href="/assets/js/40.99489203.js"><link rel="prefetch" href="/assets/js/41.928918ed.js"><link rel="prefetch" href="/assets/js/42.8ff04c77.js"><link rel="prefetch" href="/assets/js/43.347198e5.js"><link rel="prefetch" href="/assets/js/44.fc4d4540.js"><link rel="prefetch" href="/assets/js/45.5e4eff92.js"><link rel="prefetch" href="/assets/js/46.83a0c228.js"><link rel="prefetch" href="/assets/js/47.37c2f407.js"><link rel="prefetch" href="/assets/js/48.bada4ddc.js"><link rel="prefetch" href="/assets/js/49.562d8b65.js"><link rel="prefetch" href="/assets/js/5.77e36999.js"><link rel="prefetch" href="/assets/js/50.338be56f.js"><link rel="prefetch" href="/assets/js/51.999e3de3.js"><link rel="prefetch" href="/assets/js/52.11309761.js"><link rel="prefetch" href="/assets/js/53.ea6a0c8a.js"><link rel="prefetch" href="/assets/js/54.a49ee06c.js"><link rel="prefetch" href="/assets/js/55.d4d985f2.js"><link rel="prefetch" href="/assets/js/56.258972e6.js"><link rel="prefetch" href="/assets/js/57.e7d3b5af.js"><link rel="prefetch" href="/assets/js/58.50c14a49.js"><link rel="prefetch" href="/assets/js/59.8edb599b.js"><link rel="prefetch" href="/assets/js/6.ba658368.js"><link rel="prefetch" href="/assets/js/60.d1250584.js"><link rel="prefetch" href="/assets/js/61.28187287.js"><link rel="prefetch" href="/assets/js/62.1cb42759.js"><link rel="prefetch" href="/assets/js/63.3fd80d10.js"><link rel="prefetch" href="/assets/js/64.9f43af49.js"><link rel="prefetch" href="/assets/js/65.c4a47594.js"><link rel="prefetch" href="/assets/js/66.cd22b5d7.js"><link rel="prefetch" href="/assets/js/67.5c9918c9.js"><link rel="prefetch" href="/assets/js/68.fb876377.js"><link rel="prefetch" href="/assets/js/69.3414f481.js"><link rel="prefetch" href="/assets/js/7.83e78719.js"><link rel="prefetch" href="/assets/js/70.f003a000.js"><link rel="prefetch" href="/assets/js/71.39859d24.js"><link rel="prefetch" href="/assets/js/72.12912986.js"><link rel="prefetch" href="/assets/js/73.abd327ea.js"><link rel="prefetch" href="/assets/js/74.36cb7d1d.js"><link rel="prefetch" href="/assets/js/75.1cb96b9a.js"><link rel="prefetch" href="/assets/js/76.6033c6da.js"><link rel="prefetch" href="/assets/js/77.083624e2.js"><link rel="prefetch" href="/assets/js/78.70d3273c.js"><link rel="prefetch" href="/assets/js/79.14f3aecd.js"><link rel="prefetch" href="/assets/js/8.bcb11f96.js"><link rel="prefetch" href="/assets/js/80.95205bda.js"><link rel="prefetch" href="/assets/js/81.a39e63f0.js"><link rel="prefetch" href="/assets/js/82.6298e8dc.js"><link rel="prefetch" href="/assets/js/83.109c5547.js"><link rel="prefetch" href="/assets/js/84.6a1959a1.js"><link rel="prefetch" href="/assets/js/85.6ff6f61a.js"><link rel="prefetch" href="/assets/js/86.7d2bfbe7.js"><link rel="prefetch" href="/assets/js/87.2032d6ae.js"><link rel="prefetch" href="/assets/js/88.5cda9aa6.js"><link rel="prefetch" href="/assets/js/89.60c9e091.js"><link rel="prefetch" href="/assets/js/9.170a94b1.js"><link rel="prefetch" href="/assets/js/90.0dab9f57.js"><link rel="prefetch" href="/assets/js/91.ecf75d5a.js"><link rel="prefetch" href="/assets/js/92.74397fcb.js"><link rel="prefetch" href="/assets/js/93.f5559b26.js"><link rel="prefetch" href="/assets/js/94.27c65783.js"><link rel="prefetch" href="/assets/js/95.ea55ba1f.js"><link rel="prefetch" href="/assets/js/96.8a68510f.js"><link rel="prefetch" href="/assets/js/97.ef520b02.js"><link rel="prefetch" href="/assets/js/98.d4a41570.js"><link rel="prefetch" href="/assets/js/99.bdd726ad.js">
    <link rel="stylesheet" href="/assets/css/0.styles.15972595.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="仲灏小栈" class="logo"> <span class="site-name can-hide">仲灏小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/site-data/avatar/avatar-wx.jpg"> <div class="blogger-info"><h3>仲灏</h3> <span>诚意, 正心, 格物, 致知</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>HTML&amp;CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/1110/" aria-current="page" class="active sidebar-link">Scss语言学习实用心得</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/1110/#数据类型" class="sidebar-link">数据类型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/1110/#字符串" class="sidebar-link">字符串</a></li><li class="sidebar-sub-header"><a href="/pages/1110/#数组列表" class="sidebar-link">数组列表</a></li><li class="sidebar-sub-header"><a href="/pages/1110/#map-对象" class="sidebar-link">map 对象</a></li></ul></li></ul></li><li><a href="/pages/15af70/" class="sidebar-link">H5 标签使用场景</a></li><li><a href="/pages/03a46d/" class="sidebar-link">css常用命名单词</a></li><li><a href="/pages/e1f868/" class="sidebar-link">项目基础建设 css与处理器scss</a></li><li><a href="/pages/b189f2/" class="sidebar-link">项目基础建设 CSS公共样式</a></li><li><a href="/pages/10481f/" class="sidebar-link">iframe</a></li><li><a href="/pages/749ce2/" class="sidebar-link">css 变量使用</a></li><li><a href="/pages/14d171/" class="sidebar-link">css常见但不常用的属性</a></li><li><a href="/pages/dbb200/" class="sidebar-link">躺着旋转动画</a></li><li><a href="/pages/7e3052/" class="sidebar-link">边框渐变（圆形）</a></li><li><a href="/pages/3aded5/" class="sidebar-link">float 布局</a></li><li><a href="/pages/2a8bd5/" class="sidebar-link">在 Javascript 和 Sass（或 CSS！）之间共享变量的方法</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Node</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>跨端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Electron</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>浏览器</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>其他</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-0c557b5e><div class="articleInfo" data-v-0c557b5e><ul class="breadcrumbs" data-v-0c557b5e><li data-v-0c557b5e><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-0c557b5e></a></li> <li data-v-0c557b5e><a href="/web/#大前端" data-v-0c557b5e>大前端</a></li><li data-v-0c557b5e><a href="/web/#HTML&amp;CSS" data-v-0c557b5e>HTML&amp;CSS</a></li></ul> <div class="info" data-v-0c557b5e><div title="作者" class="author iconfont icon-touxiang" data-v-0c557b5e><a href="https://github.com/izhaong" target="_blank" title="作者" class="beLink" data-v-0c557b5e>仲灏</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-0c557b5e><a href="javascript:;" data-v-0c557b5e>2020-12-11</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">Scss语言学习实用心得<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h2 id="数据类型"><a href="#数据类型" class="header-anchor">#</a> 数据类型</h2> <h3 id="字符串"><a href="#字符串" class="header-anchor">#</a> 字符串</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@use</span> <span class="token string">&quot;sass:string&quot;</span><span class="token punctuation">;</span></span>
$<span class="token property">prefix</span><span class="token punctuation">:</span> ms<span class="token punctuation">;</span>

<span class="token selector">.test</span> <span class="token punctuation">{</span>
    <span class="token selector">font-size: -#</span><span class="token punctuation">{</span>$prefix<span class="token punctuation">}</span>-flex<span class="token punctuation">;</span> // -ms-flex<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> \1F46D<span class="token punctuation">;</span>  // 👭<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> \21<span class="token punctuation">;</span> // \!<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> string.<span class="token function">length</span><span class="token punctuation">(</span>\7Fx<span class="token punctuation">)</span><span class="token punctuation">;</span> // 5<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> string.<span class="token function">slice</span><span class="token punctuation">(</span><span class="token string">&quot;Roboto Mono&quot;</span><span class="token punctuation">,</span> -4<span class="token punctuation">)</span><span class="token punctuation">;</span> // <span class="token string">&quot;Mono&quot;</span><span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> string.<span class="token function">index</span><span class="token punctuation">(</span><span class="token string">&quot;Helvetica Neue&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Helvetica&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> // 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="数组列表"><a href="#数组列表" class="header-anchor">#</a> 数组列表</h3> <h4 id="访问"><a href="#访问" class="header-anchor">#</a> 访问</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@use</span> <span class="token string">&quot;sass:list&quot;</span><span class="token punctuation">;</span></span>

<span class="token selector">.test</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> list.<span class="token function">nth</span><span class="token punctuation">(</span>10px 12px 16px<span class="token punctuation">,</span> 2<span class="token punctuation">)</span><span class="token punctuation">;</span> // 12px
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="查看"><a href="#查看" class="header-anchor">#</a> 查看</h4> <p><em>不需要添加</em><code>@use &quot;sass:list&quot;;</code></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>$<span class="token property">sizes</span><span class="token punctuation">:</span> 40px<span class="token punctuation">,</span> 50px<span class="token punctuation">,</span> 80px<span class="token punctuation">;</span>

<span class="token atrule"><span class="token rule">@each</span> $size in $sizes</span> <span class="token punctuation">{</span>
  <span class="token selector">.icon-#</span><span class="token punctuation">{</span>$size<span class="token punctuation">}</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> $size<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> $size<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> $size<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token selector">// 编译后
.icon-40px</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.icon-50px</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.icon-80px</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h4 id="添加"><a href="#添加" class="header-anchor">#</a> 添加</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@use</span> <span class="token string">&quot;sass:list&quot;</span><span class="token punctuation">;</span></span>

<span class="token selector">.test</span> <span class="token punctuation">{</span>
    // <span class="token property">font-size</span><span class="token punctuation">:</span> list.<span class="token function">nth</span><span class="token punctuation">(</span>10px 12px 16px<span class="token punctuation">,</span> 2<span class="token punctuation">)</span><span class="token punctuation">;</span> // 12px
    // <span class="token property">font-size</span><span class="token punctuation">:</span> list.<span class="token function">nth</span><span class="token punctuation">(</span>[line1<span class="token punctuation">,</span> line2<span class="token punctuation">,</span> line3]<span class="token punctuation">,</span> -1<span class="token punctuation">)</span><span class="token punctuation">;</span> // line3
    
    <span class="token property">font-size</span><span class="token punctuation">:</span> list.<span class="token function">index</span><span class="token punctuation">(</span>1px solid red<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> // 1
    <span class="token property">font-size</span><span class="token punctuation">:</span>  list.<span class="token function">index</span><span class="token punctuation">(</span>1px solid red<span class="token punctuation">,</span> solid<span class="token punctuation">)</span><span class="token punctuation">;</span> // 2
    <span class="token property">font-size</span><span class="token punctuation">:</span>  list.<span class="token function">index</span><span class="token punctuation">(</span>1px solid red<span class="token punctuation">,</span> dashed<span class="token punctuation">)</span><span class="token punctuation">;</span> // null 不会显示这个样式
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="map-对象"><a href="#map-对象" class="header-anchor">#</a> map 对象</h3> <h4 id="查询"><a href="#查询" class="header-anchor">#</a> 查询</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@use</span> <span class="token string">&quot;sass:map&quot;</span><span class="token punctuation">;</span></span>
$<span class="token property">font-weights</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">&quot;regular&quot;</span><span class="token punctuation">:</span> 400<span class="token punctuation">,</span> <span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 500<span class="token punctuation">,</span> <span class="token string">&quot;bold&quot;</span><span class="token punctuation">:</span> 700<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token selector">.test</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> map.<span class="token function">get</span><span class="token punctuation">(</span>$font-weights<span class="token punctuation">,</span> <span class="token string">&quot;medium&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> // 500<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> map.<span class="token function">get</span><span class="token punctuation">(</span>$font-weights<span class="token punctuation">,</span> <span class="token string">&quot;extra-bold&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> // null
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="循环"><a href="#循环" class="header-anchor">#</a> 循环</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code>$<span class="token property">icons</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">&quot;eye&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;\f112&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;start&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;\f12e&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;stop&quot;</span><span class="token punctuation">:</span> <span class="token string">&quot;\f12f&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token atrule"><span class="token rule">@each</span> $name<span class="token punctuation">,</span> $glyph in $icons</span> <span class="token punctuation">{</span>
  <span class="token selector">.icon-#</span><span class="token punctuation">{</span>$name<span class="token punctuation">}</span><span class="token selector">:before</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Icon Font&quot;</span><span class="token punctuation">;</span>
    <span class="token property">content</span><span class="token punctuation">:</span> $glyph<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token selector">// 编译
.icon-eye:before</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Icon Font&quot;</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.icon-start:before</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Icon Font&quot;</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.icon-stop:before</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Icon Font&quot;</span><span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h4 id="添加-2"><a href="#添加-2" class="header-anchor">#</a> 添加</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@use</span> <span class="token string">&quot;sass:map&quot;</span><span class="token punctuation">;</span></span>

$<span class="token property">font-weights</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">&quot;regular&quot;</span><span class="token punctuation">:</span> 400<span class="token punctuation">,</span> <span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 500<span class="token punctuation">,</span> <span class="token string">&quot;bold&quot;</span><span class="token punctuation">:</span> 700<span class="token punctuation">)</span><span class="token punctuation">;</span>

map.<span class="token function">set</span><span class="token punctuation">(</span>$font-weights<span class="token punctuation">,</span> <span class="token string">&quot;extra-bold&quot;</span><span class="token punctuation">,</span> 900<span class="token punctuation">)</span><span class="token punctuation">;</span> // <span class="token punctuation">(</span><span class="token string">&quot;regular&quot;</span><span class="token punctuation">:</span> 400<span class="token punctuation">,</span> <span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 500<span class="token punctuation">,</span> <span class="token string">&quot;bold&quot;</span><span class="token punctuation">:</span> 700<span class="token punctuation">,</span> <span class="token string">&quot;extra-bold&quot;</span><span class="token punctuation">:</span> 900<span class="token punctuation">)</span>

map.<span class="token function">set</span><span class="token punctuation">(</span>$font-weights<span class="token punctuation">,</span> <span class="token string">&quot;bold&quot;</span><span class="token punctuation">,</span> 900<span class="token punctuation">)</span><span class="token punctuation">;</span>// <span class="token punctuation">(</span><span class="token string">&quot;regular&quot;</span><span class="token punctuation">:</span> 400<span class="token punctuation">,</span> <span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 500<span class="token punctuation">,</span> <span class="token string">&quot;bold&quot;</span><span class="token punctuation">:</span> 900<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="合并"><a href="#合并" class="header-anchor">#</a> 合并</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@use</span> <span class="token string">&quot;sass:map&quot;</span><span class="token punctuation">;</span></span>

$<span class="token property">light-weights</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">&quot;lightest&quot;</span><span class="token punctuation">:</span> 100<span class="token punctuation">,</span> <span class="token string">&quot;light&quot;</span><span class="token punctuation">:</span> 300<span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token property">heavy-weights</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 500<span class="token punctuation">,</span> <span class="token string">&quot;bold&quot;</span><span class="token punctuation">:</span> 700<span class="token punctuation">)</span><span class="token punctuation">;</span>

map.<span class="token function">merge</span><span class="token punctuation">(</span>$light-weights<span class="token punctuation">,</span> $heavy-weights<span class="token punctuation">)</span><span class="token punctuation">;</span> // <span class="token punctuation">(</span><span class="token string">&quot;lightest&quot;</span><span class="token punctuation">:</span> 100<span class="token punctuation">,</span> <span class="token string">&quot;light&quot;</span><span class="token punctuation">:</span> 300<span class="token punctuation">,</span> <span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 500<span class="token punctuation">,</span> <span class="token string">&quot;bold&quot;</span><span class="token punctuation">:</span> 700<span class="token punctuation">)</span>


$<span class="token property">weights</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token string">&quot;light&quot;</span><span class="token punctuation">:</span> 300<span class="token punctuation">,</span> <span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 500<span class="token punctuation">)</span><span class="token punctuation">;</span>
map.<span class="token function">merge</span><span class="token punctuation">(</span>$weights<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 700<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> // <span class="token punctuation">(</span><span class="token string">&quot;light&quot;</span><span class="token punctuation">:</span> 300<span class="token punctuation">,</span> <span class="token string">&quot;medium&quot;</span><span class="token punctuation">:</span> 700<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div></div></div> <!----> <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=HTML%26CSS" title="标签">#HTML&amp;CSS</a></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021/12/15, 23:05:35</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><!----> <a href="/pages/15af70/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">H5 标签使用场景</div></a></div> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/pages/15af70/">H5 标签使用场景</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/486e07/"><div>
            Git Hooks
            <!----></div></a> <span class="date">02-24</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/f041f4/"><div>
            标准化编程规范解决方案
            <!----></div></a> <span class="date">02-24</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/2b68bd/"><div>
            git 提交信息规范
            <!----></div></a> <span class="date">02-24</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:izhaong@outlook.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/izhaong" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2021-2022
    <span>izhaong | <a href="https://github.com/izhaong" target="_blank">github</a> | <a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备2021031194号</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.6e09c0e4.js" defer></script><script src="/assets/js/2.26fadcea.js" defer></script><script src="/assets/js/16.3acd2d41.js" defer></script>
  </body>
</html>
